<template>
  <view>
    <Header type="back" />
    <view
      class="w-100 ab left0 bg-f8ff bottom0 rounded-120-bottom"
      :class="'top' + bar_h * 1"
    >
      <view class="w-100 ov-hd-y ab top30 bottom0 left0 px-2-6 pt-2">
        <view class="f-b-c">
          <view class="font45 fs-n-s t-20 font600 w360 line-h48">{{
            details.name || ""
          }}</view>
          <view>
            <view class="fs-n-s">
              <view
                class="f-c-c px-05 h34 mb-1 border circle4 mr-1"
                v-if="details.photograph"
              >
                <image class="w28 h28" src="../../../static/icon_line_2.png" />
                <view class="font20 t-8 px-05">拍照</view>
              </view>
              <view class="f-c-c px-05 h34 mb-1 border circle4 mr-1">
                <image class="w28 h28" src="../../../static/icon_line_1.png" />
                <view class="font20 t-8 px-05"
                  >停留点x{{ details.siteNum || "0" }}</view
                >
              </view>
            </view>
            <view class="f-e-c">
              <view class="f-c-c px-05 h34 mb-1 border circle4 mr-1">
                <image class="w28 h28" src="../../../static/icon_line_3.png" />
                <view class="font20 t-8 px-05"
                  >{{ details.duration || "0" }}分钟</view
                >
              </view>
            </view>
          </view>
        </view>

        <view class="font25 px-3 t-20 pt-2 pb-3">
          <!-- <view style="word-break: break-all;">{{from}}</view> -->
          {{ details.content || "" }}
        </view>

        <view class="w-100 h1 bg-ccc"></view>

        <view class="w-100 px-3 f-b-c pt-3">
          <view class="ty-h236">
            <view class="font24 foont500 t-20"
              >路线奖励
              <text class="pl-3 font21 t-8 mr-05 pr-1"
                >徽章 X {{ details.badgeNum || "0" }}</text
              >
              <!-- <text class="font21 t-8">侦探双肩包 X 1</text> -->
            </view>
            <view class="f-s-c pt-2">
              <view class="fs-n-s w340">
                <view
                  class="p-05"
                  v-for="item in details.badgeList"
                  :key="item.id"
                >
                  <ImageFile
                    :url="item.pic"
                    className="w72 h72 show0 rounded-circle"
                  />
                </view>
              </view>
              <!-- <view class="pl-2">
								<image class="w140 h140 circle8" src="../../../static/icon_equity_2.png" />
							</view> -->
            </view>
          </view>
          <view class="w240 f-y-s">
            <view class="f-s-c">
              <view class="w1 h236 b-ccc"></view>
              <view class="w25 h236"></view>
            </view>
            <view v-if="details.chargeType == 'CHARGE'">
              <view class="font24 foont500 t-20 pb-2">服务</view>
              <view
                v-if="isLogin"
                class="w220 h68 bg-theme circle12 font25 t-20 font500 f-s-c px-1 mb-1"
                @click="get_purchass(1)"
              >
                <image class="w42 h42" src="../../../static/icon_line_4.png" />
                <view>购买路线手册</view>
              </view>
              <view
                v-else
                class="w220 h68 bg-theme circle12 font25 t-20 font500 f-s-c px-1 mb-1"
                @click="set_go_login"
              >
                <image class="w42 h42" src="../../../static/icon_line_4.png" />
                <view>去登录</view>
              </view>

              <!-- <view class="w220 h68 bg-theme circle12 font25 t-20 font500 f-s-c px-1" @click="get_purchass(2)">
								<image class="w42 h42" src="../../../static/icon_line_5.png" />
								<view>购买导览服务</view>
							</view> -->
            </view>
          </view>
        </view>

        <view class="w-100 re h32 f-c-c my-1">
          <view class="w-100 h32 top0 left0 f-c-c ab">
            <text class="px-2 font28 font500 t-20 bg-f8ff"
              >路线站点（{{ details.siteNum || "" }}）</text
            >
          </view>
          <view class="w-100 bg-ccc h1"></view>
        </view>

        <view class="w-100 ov-hd-y" v-if="[2, 3, 4].includes(details.status)">
          <view
            class="w-100 h176 show0 bg-white circle28 mt-3 f-b-c px-2"
            v-for="item in details.zjList"
            :key="item.zjId"
          >
            <view class="font32 t-20 font600 f-s-c">
              <ImageFile :url="item.pic" className="w148 circle8 h148 mr-3" />
              {{ item.title || "" }}
            </view>
            <view></view>
            <view v-if="details.photograph">
              <view
                v-if="item.uploadPic"
                @click="set_pic_show(item)"
                class="w140 h76 font24 show0 circle28 f-c-c mr-2"
              >
                查看图片
                <!-- <image :src="img_show"  :data-src="img_show" mode="aspectFill"></image> -->
              </view>
              <view
                v-else
                class="w140 h76 show0 font24 circle28 f-c-c mr-2"
                @click="show_remad(item)"
              >
                <image src="../../../static/icon_line_6.png" class="w44 h44" />
                拍摄
              </view>
            </view>
          </view>
        </view>

        <!-- 路线状态 1：待解锁/2：待核销/3：已解锁/4：已完成 -->

        <view class="w698 h612 show0 circle54 bg-white re ov-hd mt-3" v-else>
          <view class="top101 ab right0 w360">
            <view class="font45 foont600 t-20">此路线未解锁</view>
            <view class="font28 t-20"
              >请<text class="mx-06 bg-theme circle8 p-05">购买材料包</text
              >解锁路线！</view
            >
          </view>
          <image
            src="../../../static/icon_badge_bg.png"
            class="w-100 h160 ab bottom160 left0"
          />
          <image
            src="../../../static/icon_badge_bg.png"
            class="w-100 h160 ab bottom0 left0"
          />

          <image
            src="../../../static/icon_equity_4.png"
            class="w360 h588 ab top80 left18"
          />

          <view
            class="w-100 h106 f-c-c circle54 bg-f2f2 ab bottom0 left0 font28 t-20"
          >
            <!-- 已购买，请扫描二维码解锁 -->
            <!-- <view class="w164 h64 f-c-c bg-white circle32 ml-3">
							<image src="../../../static/icon_code.png" class="w48 h38 mr-05"/>扫一扫
						</view> -->
          </view>
        </view>

        <view class="w-100 h420"></view>
      </view>
    </view>

    <Footer index="map"></Footer>

    <uni-popup ref="activity_ref" class="ssss" type="center">
      <view class="w696 h596 circle54 bg-f8ff ov-hd show0">
        <view
          class="w-100 h146 f-c-c bg-theme radius-54-botton font40 t-0 font600"
        >
          拍照确认
        </view>
        <view class="w-100 h450 bg-theme">
          <view class="w-100 h-100 bg-f8ff radius-54-right px-6 py-6">
            <view class="font28 t-20 font500 pt-2 f-c-c">
              小程序使用拍照功能会使用大量手机内存，请先退出一些应用程序进程后再进行拍照！
            </view>
            <view class="w-100 h140 f-b-c pt-5">
              <view
                class="w270 h90 bg-dd font32 t-20 font600 f-c-c circle14"
                @click="set_cancel"
                >取消</view
              >
              <view
                class="w270 h90 bg-theme font32 t-20 font600 f-c-c circle14"
                @click="get_paizai"
                >确定</view
              >
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
    <SignUp ref="signUp" />
  </view>
</template>

<script>
import Header from "../../../components/header.vue";
import ImageFile from "../../../components/img_file.vue";
import Footer from "../../../components/footer.vue"; //底部导航

import { lineDetails } from "../../../api/map/map.js";
import { order_submit } from "../../../api/order.js";
import { linescanReceiveBadge, uploadPic } from "../../../api/user.js";
import weixin_pay from "../../../common/weixinPay.js";
import isLoginMxin from "../../../common/isLogin.js";
export default {
  components: {
    Header,
    Footer,
    ImageFile,
  },
  mixins: [weixin_pay, isLoginMxin],
  data() {
    return {
      bar_h: 0,
      details: {},
      from: {},
      upload_info: {},
      img_show: "",
    };
  },
  created() {
    const { statusBarHeight } = uni.getStorageSync("systemInfo");
    this.bar_h = 100 + statusBarHeight / (uni.upx2px(100) / 100); // 状态栏高度  +  预留背景高度 整个背景高度
    this.height = uni.getStorageSync("map_height");
  },
  onLoad(val) {
    this.from = val;
  },
  mounted() {
    this.get_lineDetails(this.from.id);
  },
  methods: {
    show_remad(val) {
      this.upload_info = {
        lineId: val.lineId,
        zjId: val.zjId,
      };
      let show_paizai_tigs = uni.getStorageSync("show_paizai_tigs");

      if (!(typeof show_paizai_tigs == "boolean") || show_paizai_tigs) {
        return this.$refs.activity_ref.open();
      }

      this.get_paizai();
    },
    set_cancel() {
      this.$refs.activity_ref.close();
    },
    get_paizai() {
      uni.setStorageSync("show_paizai_tigs", false);

      this.set_cancel();

      this.set_up_load();
    },

    set_up_load() {
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ["compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["camera"], //从相册选择
        success: (res) => {
          console.log(JSON.stringify(res.tempFilePaths));
          this.set_up_image(res.tempFilePaths[0]);
        },
      });
    },

    set_up_image(val) {
      uni.showLoading({
        title: "上传中...",
      });
      let host = uni.getStorageSync("host");

      const frist_token = uni.getStorageSync("token") || "";
      const { token } = uni.getStorageSync("userInfo") || {};

      uni.uploadFile({
        url: host + "/api/v1/file/uploadImage/mobile", //仅为示例，非真实的接口地址
        filePath: val,
        name: "file",
        header: {
          Authorization: frist_token || token,
        },
        success: (uploadFileRes) => {
          console.log(uploadFileRes.data);
          let body = JSON.parse(uploadFileRes.data);
          this.upload_info.uploadPic = body.body;
          uni.hideLoading();
          this.set_up_load_line();
        },
      });
    },
    async set_up_load_line() {
      if (!this.upload_info.uploadPic) {
        return uni.showToast({
          title: "图片解析错误，请重新拍摄",
          icon: "none",
        });
      }
      const { code, body } = await uploadPic(this.upload_info);
      if (code == 0) {
        this.get_lineDetails(this.from.id);
      }
    },
    async get_lineDetails(id) {
      const { code, body } = await lineDetails({ id });
      if (code === "0") {
        this.details = body || {};
        // 来源
        if (this.from.from == "qrcode") {
          this.get_scanReceiveBadge(this.from.id);
          delete this.from.from;
        }
      }
    },
    set_pic_show(val) {
      const path = uni.getStorageSync("file") || "";
      // v-if="item.uploadPic" @click="set_pic_show(item)"
      uni.previewImage({
        urls: [path + "/file" + val.uploadPic],
        success: (res) => {
          this.img_show = res;
        },
      });
    },
    get_scanReceiveBadge(id) {
      linescanReceiveBadge({ lineId: id }).then((res) => {
        let title = res.message;
        if (res.code == 0) {
          title = "徽章领取成功！";
        }
        uni.showToast({
          title,
          icon: "none",
        });
      });
    },
    // 设置订单信息
    async get_purchass(val) {
      uni.setStorageSync("purchase_type", "LINE");
      this.details.number = 1;
      this.details.lineItemType = val; // 1：材料包/2：导览服务
      this.details.type = "LINE";

      let price = this.details.guideFee;

      if (val == 1) {
        price = this.details.materialFee;
      }
      this.details.price = price;

      uni.setStorageSync("createdOrder", this.details);
      uni.navigateTo({
        url: "/pages/purchase/index",
      });

      return;

      const userInfo = uni.getStorageSync("userInfo") || {};
      const orgId = uni.getStorageSync("orgId") || "";

      let money = this.details.guideFee;

      if (val === 1) {
        money = this.details.materialFee;
      }
      let data = {
        orgId: orgId,
        payFee: money, // 支付金额
        memberId: userInfo.id,
        remark: "",
        payType: "WECHAT_PAY", //payType：支付类型 WECHAT_PAY:微信支付/MEMBER_CARD:会员卡支付
        subOrderList: [
          {
            addressId: "",
            couponFee: "",
            couponId: "",
            freightFee: "",
            goodsList: [
              {
                activityPlanId: 0,
                date: "",
                goodsId: this.details.id,
                goodsName: this.details.name,
                lineItemType: val, // 1：材料包/2：导览服务
                number: 1,
                totalFee: money,
                unitFee: money,
              },
            ],
            integralFee: 0,
            orderType: "LINE", //food FOOD,TICKET,YEAR_CARD,MALL,MAP ,LINE
            payFee: money,
            sendType: 1, //寄送方式 1：自提/2：邮寄
            tableNo: "",
            totalFee: money,
          },
        ],
      };

      const { code, body } = await order_submit(data);
      if (code === "0") {
        let id_list = body?.orderList.map((item) => item.id);
        let pay_info = {
          orderIdList: id_list, // 订单id集合
          payFee: money, // 支付金额
          id: id_list[0], //订单id
          payStatus: body.payStatus, // 支付状态 0元
          orderId: "LINE", //
        };
        // 去提交支付
        this.get_wx_order(pay_info, "LINE");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.rounded-120 {
  border-radius: 0 0 0 88rpx;
}
.rounded-120-bottom {
  min-height: 100%;
  border-radius: 0 88rpx 0 0;
}
.rounded-120-top {
  border-radius: 88rpx 0 0 0;
}
.ty-h236 {
  min-height: 236rpx;
}
</style>
